<template>
  <div id="statusbar" class="fill flex-row">
    <div  class="start flex-center">
      <i class="iconfont icon-windows"/>
    </div>
    <div class="container flex-1 flex-row">
      <StatusBarWindow :window="item" v-for="item in windowList" :key="item.id"/>
    </div>
    <div class="icons">
      <div class="time flex-col h-fill items-center justify-around">
        <span>14:49</span>
        <span>2021/2/2</span>
      </div>
    </div>
  </div>
</template>

<script>
import StatusBarWindow from "@/layouts/desktop/StatusBarWindow"
export default {
  name: "StatusBar",
  components: {StatusBarWindow},
  computed: {
    windowList() {
      return this.$store.state.windowList.filter(item => item.icon)
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";
#statusbar {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  .start{
    padding: $pn;
    i{
      font-size: $fz-lx;
    }
    &:hover{
      background-color: rgba(0, 0, 0, 0.8);
      color: cornflowerblue;
    }
  }
  .icons{
    &>*{
      padding: $ps $pn;
      &:hover{
        background-color: rgba(0, 0, 0, 0.5);
        cursor: pointer;
      }
    }
  }
}
</style>
